import {getMessageList, getMessageInfoById} from '../api/message'
import React, { useEffect, useState } from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'

export default function Message() {
    const [data, setData] = useState([])
    const navigate = useNavigate()
    useEffect(() => {
        getMessageList().then((data)=>{
            setData(data)
        })
    }, [])
    console.log(data)
    return (
        <div>
            <ul>
                {
                    data.map((item) => (
                        <li key={item.id}>
                            <Link to={item.id}>{item.title}</Link> &nbsp;&nbsp;
                            <button onClick={()=>navigate({pathname:item.id})}>push</button> &nbsp;
                            <button onClick={()=>{
                                navigate({
                                    pathname:item.id
                                },{
                                    replace:true
                                })
                            }}>replace</button>
                        </li>
                    ))
                }
            </ul>
            <button onClick={()=>navigate(1)}>前进</button>
            <button onClick={()=>navigate(-1)}>后退</button>
            <hr />
            <Outlet></Outlet>
        </div>
    )
}
